<template>
	<view>
		<view class="t-c f-48 f-bold p-y-30">
			本次签到剩余时间
		</view>
		<view class="flex-between-row card">
			<view class="card-item flex-center-column">
				{{Math.floor(time / 3600 % 24)<10?`0${Math.floor(time  / 3600 % 24)}`:Math.floor(time  / 3600 % 24)}}
			</view>
			:
			<view class="card-item flex-center-column">
				{{Math.floor(time / 60 % 60)<10?`0${Math.floor(time  / 60 % 60)}`:Math.floor(time  / 60 % 60)}}
			</view>
			:
			<view class="card-item flex-center-column">
				{{Math.floor(time % 60)<10?`0${Math.floor(time  % 60)}`:Math.floor(time  % 60)}}
			</view>
		</view>
		<view @click="goSign" class="ball flex-center-column col-f f-bold"
			:class="signNum === 1?'ball-bg1':signNum===-1?'ball-bg2':''">
			<text>{{signNum === 0? '点击\n签到' : signNum === 1?'签到\n成功' :'暂无\n签到'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			signNum: {
				get() {
					if (+this.time === 0) {
						return -1
					}
					return this.sign
				},
			}
		},
		onShow() {
			if (!this.$store.getters.userInfo.token) {
				return this.goLogin()
			}
			this.time = 90
			this.sign = 0
			const interval = setInterval(() => {
				this.time--
				if (this.time === 0) {
					clearInterval(interval)
				}
			}, 1000)
		},
		data() {
			return {
				time: 0,
				sign: -1
			}
		},
		methods: {
			goSign() {
				switch (this.signNum) {
					case 0:
						this.sign = 1
						uni.showToast({
							title: '签到成功'
						})
						break
					case 1:
						uni.showToast({
							title: '重复签到',
							icon: 'error',
						})
						break
					case 2:
						uni.showToast({
							title: '不在签到时间内',
							icon: 'error',
						})
						break
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.ball {
		position: fixed;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		width: 260rpx;
		height: 260rpx;
		font-size: 60rpx;
		border-radius: 50%;
		background-color: #55aaff;

		&-bg1 {
			background-color: #fab6b6;
		}

		&-bg2 {
			background-color: #999;
		}
	}

	.card {
		width: 600rpx;
		margin: 20rpx auto;
		font-size: 70rpx;

		&-item {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			color: #fff;
			font-size: 60rpx;
			background-color: #55aaff;
		}
	}
</style>
